<template>
  <div>
    <div class="top-bar">
      <div class="mu-appbar mu-paper-1" color="primary" style="width: 100%;">
        <router-link to="/main/index"><i class="fa fa-home icon"></i></router-link>
        <div class="top-logo">漫画王客</div>

        <div class="padding"></div>
        <router-link class="btn-top search" to="/search"></router-link>
        <!-- <a class="btn-top menu">[菜单]</a> -->
      </div>
    </div>
    <transition name="router-fade" mode="out-in">
      <div style="margin-top:48px;">
        <router-view></router-view>
      </div>
    </transition>
    <!-- <mu-paper class="bottomNav">
      <mu-bottom-nav class="nav_tool" :value="bottomNav" @change="handleChange">
        <mu-bottom-nav-item value="List" title="ArticleList" :to="{path:'/main/articleList'}">
          <i class="fa fa-list"></i>
        </mu-bottom-nav-item>
        <mu-bottom-nav-item value="uploadImg" :to="{path:'/main/uploadImg'}" title="uploadImg">
          <i class="fa fa-cloud-upload"></i>
        </mu-bottom-nav-item>
        <mu-bottom-nav-item :to="{path:'/main/images'}" value="images" title="Pictures">
          <i class="fa fa-picture-o"></i>
        </mu-bottom-nav-item>
        <mu-bottom-nav-item :to="{path:'/main/userinfo'}" value="userinfo" title="userinfo">
          <i class="fa fa-user"></i>
        </mu-bottom-nav-item>
      </mu-bottom-nav>
    </mu-paper> -->
  </div>
</template>
<style lang='less'>
  .mu-popover {
    top: 48px !important;

    .mu-menu-item {
      justify-content: center;
      font-size: 13px;
    }
  }

  .top-bar .mu-appbar {
    height: 48px !important;
    background-color: #FFFFFF;
  }

  .mu-appbar-title {
    text-align: center;
    font-size: 14px;
    line-height: 40px;
  }

  .mu-ripple-wrapper {
    line-height: 30px;
  }

  .mu-menu-item-wrapper {
    height: 30px;
    line-height: 30px;
  }

  .mu-popover {
    right: 0;
    display: flex;
    justify-content: center;
  }

  .mu-appbar {
    height: auto;
    position: fixed;
    top: 0;
  }

  .nav_tool {
    position: fixed;
    bottom: 0;
  }

  .bottomNav {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  /* 顶栏 */
  .top-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    z-index: 149;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.5rem;
    background-color: #FFFFFF;
  }

  .top-bar .top-logo {
    margin-left: 10px;
    font-weight: 800;
    color: #ffb48e;
  }

  .top-bar .top-title {
    display: block;
    height: 1.1rem;
    line-height: 1.1rem;
    font-size: 0.9rem;
    color: #535252;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-bar .padding {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .top-bar .btn-top {
    display: block;
    text-indent: -2500rem;
    font-size: 0;
  }

  .top-bar .btn-top.back {
    padding: 0.375rem;
  }

  .top-bar .btn-top.back::after {
    content: "";
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    background: url("./../../public/images/imgs.png") no-repeat -3.9rem -5.3rem;
    background-size: 14.8rem 7rem;
    width: 1.35rem;
    height: 1.35rem;
    ;

    background-repeat: no-repeat;
  }

  .top-bar .btn-top.back:active {
    background-color: #DCDCD6;
  }

  .top-bar .btn-top.search {
    padding: 0.375rem;
  }

  .top-bar .btn-top.search::after {
    content: "";
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    background: url("./../../public/images/imgs.png") no-repeat -7.1rem -5.3rem;
    background-size: 14.8rem 7rem;
    width: 1.35rem;
    height: 1.35rem;
    ;

    background-repeat: no-repeat;
  }

  .top-bar .btn-top.search:active {
    background-color: #DCDCD6;
  }

  .top-bar .btn-top.menu {
    padding: 0.375rem;
    margin-right: 0.125rem;
  }

  .top-bar .btn-top.menu::after {
    content: "";
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    background: url("./../../public/images/imgs.png") no-repeat -5.5rem -5.3rem;
    background-size: 14.8rem 7rem;
    width: 1.35rem;
    height: 1.35rem;
    ;

    background-repeat: no-repeat;
  }

  .top-bar .btn-top.menu:active {
    background-color: #DCDCD6;
  }

</style>

<script>
  import {
    cookie
  } from "../commponent";
  export default {
    watch: {
      $route(to, from) {
        this.title = to.meta.description;
        this.bottomNav = to.name;
      }
    },
    mounted() {
      this.isOnline =
        cookie.get("name") || sessionStorage.wbuserName ? true : false;
      this.title = this.$route.meta.description;
      this.bottomNav = this.$route.name;
    },
    data() {
      return {
        bottomNav: "movies",
        bottomNavColor: "movies",
        title: "",
        isOnline: false
      };
    },
    computed: {
      isOnline: {
        get: function () {
          return this.isOnline;
        },
        set: function () {
          return cookie.get("name") || sessionStorage.wbuserName ? true : false;
        }
      }
    },
    mounted() {},

    methods: {
      handleChange(val) {
        this.bottomNav = val;
      },
      about() {
        this.$router.push("/main/about");
      },
      back() {
        this.$router.back();
      },
      onHeaderClick(nn) {
        console.log(nn);
      },
      publish() {
        this.$router.push("/main/post");
      },
      logout() {
        if (sessionStorage.wbuserName) {
          WB2.logout(res => {
            console.log(res);
            delete sessionStorage.wbuserId;
            delete sessionStorage.wbuserName;
          });
        }
        if (!this.isOnline) {
          this.$router.push("/login");
        } else {
          this.$http.get("/api/logout").then(res => {
            if (res.data.ok) {
              cookie.remove("name");
              Toast({
                duration: 2000,
                message: res.data.msg
              });
              this.isOnline = false;
            }
          });
        }
      }
    }
  };

</script>
